<template>
	<div>
		<div class="my-body">
			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">经销商：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>

			<div class="ipt_a">
				<div style="float: left; line-height: 30px;"  class="tab_font-size">医院地区：</div>
				<el-input v-model="input" placeholder="请输入内容"
					style=" width: 150px;height: 50px; float: left;"></el-input>
			</div>

			<div style="float: left;">
				<el-button type="primary" plain>查询</el-button>

			</div>
		
			<div>
				<div style="width: 100%; float: left;">
					<el-button type="primary" @click="dialogVisible = true" plain>仓库出库申请</el-button>
					<el-button type="danger" plain>删除入库申请</el-button>
					
				</div>
				
				<el-dialog title="关联企业列表" :visible.sync="guanlianqy" width="50%" :before-close="handleClose">
					<div style="width: 100%;">
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">企业编号：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
				
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">企业名称：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
						<el-button type="primary">查询</el-button>
						<template>
							<el-table :data="tableData" border style="width: 100%;margin-top: 30px;" :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
								<el-table-column fixed prop="bianhao" label="企业编号">
								</el-table-column>
								<el-table-column prop="senddate" label="企业名称">
								</el-table-column>
				
								<el-table-column prop="province" label="授权产品类型">
								</el-table-column>
								<el-table-column prop="address" label="组织代码">
								</el-table-column>
								<el-table-column prop="address" label="税号">
								</el-table-column>
				
							</el-table>
						</template>
					</div>
				</el-dialog>
				<el-dialog title="供货医院地区选择" :visible.sync="ghyyxz" width="12%" :before-close="handleClose">
					<div style="width: 100%;">
				
						<el-button type="primary" @click="yiykeshi = true">医院</el-button>
						<el-button type="primary" @click="diquxuanzhe = true">地区</el-button>
					</div>
				</el-dialog>
				<el-dialog title="供货医院地区选择" :visible.sync="diquxuanzhe" width="30%" :before-close="handleClose">
					<div style="width: 100%;">
				        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					</div>
				</el-dialog>
				<el-dialog title="医院科室查询" :visible.sync="yiykeshi" width="50%" :before-close="handleClose">
					<div style="width: 100%;">
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">医院编号：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
				
						<div class="ipt_a">
							<div style="float: left; line-height: 30px;">医院名称：</div>
							<el-input v-model="input" placeholder="请输入内容"
								style=" width: 150px;height: 50px; float: left;"></el-input>
						</div>
						<el-button type="primary">查询</el-button>
						<template>
							<el-table :data="tableData" border style="width: 100%;margin-top: 30px;"  :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
								<el-table-column fixed prop="bianhao" label="医院编号">
								</el-table-column>
								<el-table-column prop="senddate" label="医院名称">
								</el-table-column>
				
								<el-table-column prop="province" label="科室名称">
								</el-table-column>
								<el-table-column prop="address" label="省份">
								</el-table-column>
								<el-table-column prop="address" label="地址">
								</el-table-column>
				
							</el-table>
						</template>
					</div>
				</el-dialog>
				<el-dialog title="添加出库申请" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
					<div style="width: 100%;">
						<el-form ref="form" :model="form" label-width="80px">
							
								<el-form-item label="入出库申请编号">
								
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								   <el-button type="primary">刷新</el-button>
								</el-form-item>
								<el-form-item label="医院(地区)">
								    <el-input v-model="form.name" style="width: 50px;"></el-input>
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								     <el-button type="primary" @click="ghyyxz =  true">...</el-button>
								</el-form-item>
								<el-form-item label="出库申请时间">
									<el-date-picker v-model="value1" type="date" placeholder="选择日期">
									</el-date-picker>
								</el-form-item>
								<el-form-item label="经销商">
								    <el-input v-model="form.name" style="width: 50px;"></el-input>
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								     <el-button type="primary" @click="guanlianqy = true">...</el-button>
								</el-form-item>
								<el-form-item label="出库申请类型" >
									<el-select v-model="form.region" placeholder="">
										<el-option label="正常" value="shanghai"></el-option>
										<el-option label="其他" value="shanghai"></el-option>
									</el-select>
								</el-form-item>
							
								<el-form-item label="收货人" >
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								</el-form-item>
								<el-form-item label="收货人电话" >
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								</el-form-item>
								<el-form-item label="收货地址" >
									<el-input v-model="form.name" style="width: 200px;"></el-input>
								</el-form-item>
								
							 	<el-form-item label="申请起始流水" >
							 		
							 			<el-button type="success" @click="diaxuanzhe = true">添加</el-button>
										<el-button type="warning" >删除</el-button>
										<el-button type="success">清空</el-button>
							 	</el-form-item>
							
								
						</el-form>
						
						
						<div style="width: 100%; ">

							<div style="width: 100%;">
								<div style="font-weight: 600;">出库产品明细</div>
								<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
									style="width: 100%">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column prop="bianhao" label="系列">
									</el-table-column>
									<el-table-column prop="senddate" label="类型" >
									</el-table-column>
									<el-table-column prop="enddate" label="规格">
									</el-table-column>
                                    <el-table-column prop="enddate" label="出货数量">
                                    </el-table-column>

								</el-table>


							</div>
							<div style=" line-height: 30px;">出库合计数量：0件</div>


						</div>
					        <div class="ipt_b">
					        	<div style="float: left; line-height: 30px;">出库理由：</div>
					        		<el-input v-model="form.name" style="width: 200px;"></el-input>
					        </div>
						 
						 	
						

						<div style="margin-top: 30px;">
							<el-button type="primary">保存</el-button>
							<el-button type="warning"> 返回</el-button>
						</div>


					</div>

				</el-dialog>
				
				<el-dialog title="产品系列表" :visible.sync="dialogVisiblexiolie" width="30%" :before-close="handleClose">
					<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
					<div style="margin-top: 30px;">
						<el-button type="primary">确认提交</el-button>
						<el-button type="warning">放弃返回</el-button>
					</div>
				</el-dialog>
				<el-dialog title="产品系列表" :visible.sync="diaxuanzhe" width="50%" :before-close="handleClose">
					<div style="width: 100%; height: 550px;">
						<div style="width: 50%; float: left;">
							<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
						</div>
						<div style="width: 50%; float: left;">
							
							<template>
								<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
									style="width: 100%">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column fixed prop="bianhao" label="产品规格">
									</el-table-column>
							
									<el-table-column prop="enddate" label="产品单价">
									</el-table-column>
									<el-table-column prop="name" label="产品数量">
									</el-table-column>
								
									<el-table-column prop="senddate" label="备注">
									</el-table-column>
								</el-table>
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
									:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
									:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
								</el-pagination>
							</template>
							<div style="margin-top: 30px; ">
								<div style="padding: 20px 0;">每次只能选择一种规格的产品进行确认添加</div>
								<el-button type="primary">添加</el-button>
								<el-button type="warning">返回</el-button>
							</div>
						</div>
					</div>
					
					
				</el-dialog>
				<div style="margin-top: 30px; width: 100%; float: left;">
					<div style=" width:100%; float: left;">

						<template>
							<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
								style="width: 100%" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
								<el-table-column type="selection" >
								</el-table-column>
								<el-table-column fixed prop="bianhao" label="申请编号">
								</el-table-column>

								<el-table-column prop="enddate" label="申请时间">
								</el-table-column>
								<el-table-column prop="name" label="授权编号">
								</el-table-column>
								<el-table-column prop="senddate" label="合同编号">
								
								</el-table-column>
								<el-table-column prop="senddate" label="订货区域">
								</el-table-column>
								<el-table-column prop="senddate" label="订货医院">
								</el-table-column>
								<el-table-column prop="senddate" label="出库状态">
								</el-table-column>
								<el-table-column prop="senddate" label="经销商">
								</el-table-column>
								<el-table-column prop="senddate" label="进货人">
								</el-table-column>
								<el-table-column prop="senddate" label="收货人">
								</el-table-column>
								<el-table-column prop="senddate" label="收货地址">
								</el-table-column>
							
								<el-table-column prop="senddate" label="备注">
								</el-table-column>
							</el-table>
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
								:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
						</template>
					</div>


				</div>

			</div>
		</div>
		<div class="my-body">
			<div>
				<div>
					
					<el-button type="primary" @click="rukumingxi = true" plain>添加产品明细</el-button>
					<el-button type="danger" plain>删除产品明细</el-button>
					<el-button type="warning" plain>清空订货明细</el-button>
					
					<span>入库信息:产品入库编号【RK11012409260003】系列-类型【TranAccurate心脏封堵器输送系统-L封堵器输送系统】生产批号【D240718】</span>
				</div>
				
				<el-dialog title="产品规格明细列表" :visible.sync="rukumingxi" width="50%" :before-close="handleClose">
					<div style="width: 100%; height: 700px;">
						<div style="width: 50%; height: 600px; float: left;">
							<el-tree
							  class="filter-tree"
							  :data="data"
							  :props="defaultProps"
							  default-expand-all
							  :filter-node-method="filterNode"
							  ref="tree">
							</el-tree>
						</div>
						<div style="width: 50%; height: 600px; float: left;">
							<template>
								<el-table :data="tableData"
									style="width: 100%">
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column fixed prop="bianhao" label="产品规格">
									</el-table-column>
							
									<el-table-column prop="enddate" label="产品单价">
									</el-table-column>
									<el-table-column prop="name" label="产品数量">
									</el-table-column>
									<el-table-column prop="senddate" label="备注">
										
									</el-table-column>
									
								</el-table>
								
							</template>
							
						</div>
						<div style="width: 100%; float: left; margin-top: 50px;">
							<el-button type="success"  >返回</el-button>
							<el-button type="warning">添加</el-button>
						</div>
						
					</div>
					
				</el-dialog>
				<el-dialog title="产品入库扫描" :visible.sync="rukusaomiao" width="50%" :before-close="handleClose">
					<div style="width: 100%; height: 700px;">
						<div>产品系列信息：系列【XXXX系统】类型【xxxx系统-03】</div>
						<div>产品入库信息：入库编号【RK11012409560003】产生批号【D240718】生产日期 【2024821】灭菌日期【20240821】灭菌箱编号 【04-2】</div>
						<div style="width: 50%; float: left;">
							<div style=" font-weight: 600; margin-top: 10px;" >扫描信息</div>
							<div>
								
								<div class="ipt_b">
									<div style="float: left; line-height: 30px;">入库日期：</div>
									<el-date-picker v-model="value1" type="date" placeholder="选择日期">
									</el-date-picker>
								</div>
								<div class="ipt_a">
									<div style="float: left; line-height: 30px;">批量备注：</div>
									<el-input v-model="input" placeholder="请输入内容"
										style=" width: 150px;height: 50px; float: left;"></el-input>
								</div>
								
							</div>
							<template>
								<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
									style="width: 100%">
									
									<el-table-column fixed prop="bianhao" label="序号">
									</el-table-column>
							
									<el-table-column prop="enddate" label="类型(规格)">
									</el-table-column>
									<el-table-column prop="name" label="申请数量">
									</el-table-column>
								
									<el-table-column prop="senddate" label="入库数量">
									</el-table-column>
									<el-table-column prop="senddate" label="扫描数量">
									</el-table-column>
								</el-table>
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
									:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
									:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
								</el-pagination>
							</template>
							
						</div>
						<div style="width: 50%; float: left;">
							 <div style=" font-weight: 600; margin-top: 10px;" >产品条码</div>
							 
							 <div>规格条码：未知</div>
							 <div>产品序列：未知  <el-button type="primary">开始扫描</el-button></div>
							
							<template>
								<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
									style="width: 100%" >
									<el-table-column type="selection" width="55">
									</el-table-column>
									<el-table-column fixed prop="bianhao" label="序号">
									</el-table-column>
							
									<el-table-column prop="enddate" label="条码">
									</el-table-column>
									<el-table-column prop="name" label="类型(规格)">
									</el-table-column>
								
									<el-table-column prop="senddate" label="状态">
									</el-table-column>
									<el-table-column prop="senddate" label="入库数量">
									</el-table-column>
								</el-table>
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
									:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
									:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
								</el-pagination>
							</template>
							<div style="margin-top: 30px;">
								<el-button type="primary">产品入库提交</el-button>
								<el-button type="warning">放弃返回</el-button>
							</div>
						</div>
					</div>
					
					
				</el-dialog>
				<div style="margin-top: 30px; width: 100%; float: left;">
					<div style=" width:100%; float: left;">

						<template>
							<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
								style="width: 100%" border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
								<el-table-column type="selection" width="55">
								</el-table-column>
								<el-table-column fixed prop="bianhao" label="产品规格">
								</el-table-column>

								<el-table-column prop="enddate" label="产品编号">
								</el-table-column>
								<el-table-column prop="name" label="产品类型">
								</el-table-column>
								<el-table-column prop="senddate" label="入库起始流水">
									
								</el-table-column>
								<el-table-column prop="senddate" label="入库申请数量">
								</el-table-column>
								<el-table-column prop="senddate" label="已入库数量">
								</el-table-column>
								<el-table-column prop="senddate" label="条码发行">
								</el-table-column>
								<el-table-column prop="senddate" label="条码打印">
									<el-button>打印</el-button>
								</el-table-column>
								<el-table-column prop="senddate" label="备注">
								</el-table-column>
								
							</el-table>
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
								:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
						</template>
					</div>


				</div>

			</div>
		</div>

	</div>
</template>

<script>
	export default {

		data() {
			return {
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				valuesj: 2024,
				dialogVisiblexiolie:false,
				diaxuanzhe:false,
				rukusaomiao:false,
				laokuan:false,
				rukumingxi:false,
				guanlianqy:false,
				ghyyxz:false,
				yiykeshi:false,
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '已签收'
				}, {
					value: '3',
					label: '未签收'
				}],
				data: [{
					label: '中国大陆',
					children: [{
							label: '上海',
						}, {
							label: '北京',
						},
						{
							label: '四川',
						}
					]
				}],
				value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				chanpingguige: false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 5,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}],
				form: {
					name: '',
					regiona: '',
					regionb: '',
					regionc: '',
					regiond: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: '',
					regioB: '',
					regioA: ''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}

			}
		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleClose(done) {
				done();
				// this.$confirm('确认关闭？')
				// 	.then(_ => {
				// 		done();
				// 	})
				// 	.catch(_ => {});
			},

			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ipt_a {
		width: 240px;
		height: 50px;
		float: left;
	}

	.ipt_aa {
		width: 400px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}

	.listdizhi {
		width: 100%;
		height: 100px;
		float: left;
		border-bottom: 1px solid;
	}

	.lie {
		width: 90%;
		height: 100%;
		float: left;

	}

	.listdizhia {
		width: 100%;
		height: 50px;
		float: left;
	}

	.listdizhia div {
		float: left;
		margin-left: 30px;
	}
</style>